<template>
	<page-meta>
		<navigation-bar title="乐居" background-color="#354e44" />
	</page-meta>
	<view class="pay">
		<view class="pay-ordersn">
			<text class="pay-ordersn-title">订单编号:</text>
			{{orderBase.orderSn}}
		</view>
		<view class="pay-ordersn">
			<text class="pay-ordersn-title">订单金额:</text>
			{{orderBase.totalAmount}}
		</view>
		<view class="pay-method">选择支付方式</view>
		<radio-group>
			<label class="pay-way" v-for="(item, index) in payList" :key="item.name">
				<!-- <uni-icons :color="item.color" class="pay-way-img" custom-prefix="iconfont" :type="item.icon" size="40">
				</uni-icons> -->
				<i :style="{color:item.color}" :class="['iconfont','pay-way-img',item.icon] "></i>
				<view class="pay-way-name">{{item.name}}</view>
				<view class="pay-way-radio">
					<radio color="#354e44" :checked="index === current" />
				</view>

			</label>
		</radio-group>

		<view @tap='payIt' class="pay-now">立即支付</view>
		<view class="pay-text">
			点击立即支付,即表示您同意
			<view class="pay-text-link">
				条款协议
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPreOrderById as getPreOrderByIdApi,
		payConfirm as payConfirmApi
	} from '../../../api/common/index.js'
	import {showTip} from '../../../utils/index.js'
	export default {
		name: 'Pay',
		data() {
			return {
				orderId: '',
				orderBase: {},
				orderItems: [],
				payList: [{
						name: '支付宝支付',
						checked: true,
						icon: 'icon-zhifubaozhifu-copy',
						color: 'blue'
					},
					{
						name: '微信支付',
						checked: false,
						icon: 'icon-weixinzhifu',
						color: 'green'
					}
				],
				current: 0,//1代表支付宝,2代表微信
			}
		},
		onLoad(config) {
			this.orderId = config.orderId;
			// console.log('this.orderId==>',this.orderId);
			this.getOrderDetai();
		},
		methods: {
			payIt(){
				payConfirmApi({
					orderId:this.orderId,
					payType:this.current+1
				})
				.then(res=>{
					showTip('支付成功','success');
					var allCount=this.orderBase.totalAmount;
					setTimeout(()=>{
						uni.navigateTo({
							url:`../successPay/successPay?all=${allCount}`
						})
					},1000)
					
				})
			},
			//获取订单详情
			getOrderDetai() {
				getPreOrderByIdApi(this.orderId)
					.then(res => {
						this.orderBase = res.data.orderBase;
						this.orderItems = res.data.orderItems;
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pay {
		width: 100%;
		height: 100vh;
		background-color: #f1ece7;
		padding: 0 30rpx;
		box-sizing: border-box;

		&-ordersn {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
			color: #333;
			&-title{
				color:gray;
			}
		}
		&-way{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 120rpx;
			&-name{
				flex: 1;
				margin-left: 15rpx;
				font-size: 28rpx;
			}
			&-img{
				font-size: 60rpx;
			}
		}
		&-now{
			width: 524rpx;
			height: 80rpx;
			background-color: #354e44;
			text-align: center;
			line-height: 80rpx;
			border-radius: 40rpx;
			margin: 60rpx auto 15rpx;
			color: #FFFFFF;
		}
		&-text{
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			line-height: 24rpx;
			color: gray;
			&-link{
				display: inline-block;
				color: blue;
			}
		}
	}
</style>
